// 问题：
// 1. 不能直接所有的都全局定义，这样限制死了用户的使用方式
//    应该的方式：用户想全局就全局，想局部就局部
// 2. 自定义指令模块，不止一个指令，有很多个指令

// 注册了一个自定义指令， v-imgerror
export const imgerror = {
  // 当指令所在的元素，被插入到页面中时执行
  inserted(el, binding) {
    // el: element 指令所在的元素
    // binding: 指令相关的信息对象， binding.value 指令的值
    // console.log(el, binding.value)

    // 原生，图片加载失败
    // img.onerror
    el.onerror = function() {
      el.src = binding.value
    }
  }
}

// 自定义指令，v-color="值"
// <h1 v-color="color">123</h1>   color: red;
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}

